<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="user">
                <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="UserName"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="mail"
                    label="Email"
                    width="300">
                </el-table-column>
                <el-table-column
                    prop="integral"
                    label="Integral"
                    width="180">
                </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="商家管理" name="shop">
                <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="ID"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="shopname"
                    label="ShopName"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="boss"
                    label="Boss"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="Address"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="email"
                    label="Email"
                    width="300">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="Status"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="createdate"
                    label="CreateDate"
                    width="180">
                </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="管理员管理" name="admin_table">
                <el-button type="primary" @click="dialogFormVisible = true">创建后台管理员</el-button>

                <el-dialog title="注册后台管理员(默认无任何权限)" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="UserName" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="Password" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleCreate">确 定</el-button>
                </div>
                </el-dialog>

                <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="UserName"
                    width="180">
                </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    name: "user",
    data() {
      return {
        activeName: 'first',
        tableData: [],
        dialogFormVisible: false,
         form: {
          name: '',
          password: ''
        },
        formLabelWidth: '120px'
      };
    },
    methods: {
      handleClick(tab) {
        if(tab.name == 'user'){
            this.$axios.get("/api/getAllUser").then(res=>{
                this.tableData = res.data
            });
        }else if(tab.name == 'shop'){
            this.$axios.get("/api/getAllShop").then(res=>{
                this.tableData = res.data
            });
        }else if(tab.name == 'admin_table'){
            this.$axios.get("/api/getAllAdmin").then(res=>{
                this.tableData = res.data
            });
        }
      },
       handleCreate(){
          this.$axios.post("/api/insertAdmin",this.$querystring.stringify({
            username:this.form.name,
            password:this.form.password
            })).then(reponse=>{
            console.log(reponse);
            if(reponse.data == true){
                /*
                成功跳转
                */
               this.dialogFormVisible = false;
               alert("注册成功")
            }else{
                alert("注册失败")
            }
        })
        .catch(error=>{
            console.log(error);
        })
      }
    },
    mounted(){
        if(this.$cookies.get("user_second") != 'ok'){
            alert("无权限");
            this.$router.push("/adminindex")
        }
    }
}
</script>

<style scoped>

</style>